import * as React from "react";
import {StoreState} from "@/store";
import {connect} from "react-redux";
import {WindowService} from "@/core/services/window-service";
import Icon from "@/components/common/icon";
import {Inject} from "@/core/base/inject";

const ma = "ma-nav";
const title_icon = require("../../../static/img/title_icon.png");

export interface IPropsTitleBar {
    isMaxWindow:boolean,
}

class TitleBar extends React.Component<IPropsTitleBar, any>{
    @Inject("WindowService") windowService:WindowService;

    handlerDoubleClick(){
        this.windowService.changeWindowMax();
    }

    handlerMouseMove(e:MouseEvent){
        if(this.windowService){
            this.windowService.moveTo(e)
        }
    }

    componentDidMount(): void {
        let handlerMouseMove = this.handlerMouseMove.bind(this);
        const navBar  = document.getElementById("nav-bar");
        if(navBar){
            navBar.addEventListener("mousedown", (e:MouseEvent) =>{
                this.windowService.baseX = e.x;
                this.windowService.baseY = e.y;
                navBar.addEventListener("mousemove", handlerMouseMove);
            });
            navBar.addEventListener("mouseup", () => {
                this.windowService.baseX = 0;
                this.windowService.baseY = 0;
                navBar.removeEventListener("mousemove", handlerMouseMove)
            })
        }
    }

    render() {
        const {isMaxWindow} = this.props;
        return <div className={`${ma}`} id="nav-bar" onDoubleClick={ () => this.handlerDoubleClick()}>
                <div className={`${ma}-menus`}>
                    <div className={`${ma}-logo`}>
                        <img src={title_icon} alt=""/>
                    </div>
                    <div className={`${ma}-title`}>
                        一条小蜘蛛
                    </div>
                </div>
                <div className={`${ma}-list`}>
                    <div className={`${ma}-list-item`} onClick={() => this.windowService.minWindow()}>
                        <Icon icon="zuixiaohua"/>
                    </div>
                    <div className={`${ma}-list-item`} onClick={() => this.windowService.changeWindowMax()}>
                        <Icon icon={isMaxWindow ? "chuangkou" : "duoxuankuang"}/>
                    </div>
                    <div className={`${ma}-list-item`} onClick={() => this.windowService.closeWindow()}>
                        <Icon icon="guanbi"/>
                    </div>
                </div>
        </div>;
    }
}

const mapStateToProps = (state:StoreState) => ({
    isMaxWindow: state.WindowService.isMaxWindow
});

export default connect(mapStateToProps)(TitleBar);
